<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2021.8.1——vue_test1</title>
	</head>
	<body>
		<!-- view层 模板 -->
		<div id="app">
			<h1>Hello Word!</h1>
			<h2 :title="message">welcome~</h2>
			<br>
			<br>
			<div class="if_for_prc">
				<p>通过isLight判断现在是白天还是黑夜！
				<h3 v-if="isLight">现在是白天！</h3>
				<h3 v-else>现在是黑夜！</h3>
				</p>
				<br>
				<br>
				<p>if/if-else
				<h3 v-if="isTime==='上午'">现在是上午！</h3>
				<h3 v-else-if="isTime==='中午'">现在是中午！</h3>
				<h3 v-else>现在是下午！</h3>
				</p>
			</div>

			<br>
			<br>

			<div class="on_click_test">
				<h3>button上绑定一个事件</h3>
				<button type="button" @click="sayHi">点我点我！</button>
			</div>

			<br>
			<br>

			<div class="select_show">
				<h3>单选并显示出来</h3>
				<input type="radio" value="VUE" id="study_item" v-model="isStydy" /><label for="study_item">VUE</label>
				<input type="radio" value="CSS" id="study_item" v-model="isStydy" /><label for="study_item">CSS</label>
				<input type="radio" value="HTML5" id="study_item" v-model="isStydy" /><label
					for="study_item">HTML5</label>
				<input type="radio" value="JAVA" id="study_item" v-model="isStydy" /><label
					for="study_item">JAVA</label>
				<input type="radio" value="JS" id="study_item" v-model="isStydy" /><label for="study_item">JS</label>
				<br>
				想学习的编程语言：{{isStydy}}
				<hr>
				<br>
				<br>
				<br>
				<h3>多选并显示出来</h3>
				<input type="checkbox" value="VUE" id="study_item" v-model="wantStudy" /><label
					for="study_item">VUE</label>
				<input type="checkbox" value="CSS" id="study_item" v-model="wantStudy" /><label
					for="study_item">CSS</label>
				<input type="checkbox" value="HTML5" id="study_item" v-model="wantStudy" /><label
					for="study_item">HTML5</label>
				<input type="checkbox" value="JAVA" id="study_item" v-model="wantStudy" /><label
					for="study_item">JAVA</label>
				<input type="checkbox" value="JS" id="study_item" v-model="wantStudy" /><label
					for="study_item">JS</label>
				<br>
				想学习的编程语言：{{wantStudy}}

				<br>
				<br>
				<br>
				<h3>下拉选择框</h3>
				<select name="sel_object" v-model="selObj">
					<option value="" disabled="disabled" selected>请选择合适的object</option>
					<option value="lhn">lhn</option>
					<option value="bh">bh</option>
					<option value="mxh">mxh</option>
				</select>
				<br>
				选择的object对象是：{{selObj}}
				<br>
			</div>

			<br>
			<br>
			<br>

			<div class="comp_test">
				<!-- 组件中使用v-for循环来循环compList中的数据，数据通过自定义属性text进行绑定 -->
				<!-- 其中的text是自定义的属性，通过v-bind进行了绑定 -->
				<show_text v-for="(item,index) in compList" :text="item"></show_text>
			</div>
		</div>
		<!-- 导入vue.js -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script type="text/javascript">
			// 定义一个组件
			Vue.component("show_text", {
				// 组件内需要接收的属性为text
				props: ["text"],
				// 模板中显示通过属性传过来的值
				template: `<p >{{text}}</p>`
			})
			var vm = new Vue({
				el: "#app",
				// model:数据
				data: {
					message: "whkgogo欢迎您的到来!",
					isLight: true,
					isTime: "上午",
					isStydy: "",
					wantStudy: [],
					selObj: "",
					compList:["项目","项目","项目","项目","项目","项目"]
				},
				methods: {
					// 方法必须定义在methods中
					sayHi() {
						alert("人海茫茫，感谢相遇")
					}
				}
			})
		</script>
	</body>
</html>
